<template>
  <el-card>
    <div class="contner">
      <el-row class="subjectOne">
        <el-col>
          <el-button type="primary" size="medium" @click="dialogVisible = true">新增学科</el-button>
        </el-col>
      </el-row>
      <el-row class="subjectTwo">
        <div class="subjectLeft">
          <el-input placeholder="请输入内容" v-model="sousuoSub" @blur="loseFocus">
            <template slot="prepend">学科名称</template>
          </el-input>
        </div>
        <div class="subjectRight">
          <el-button @click="clearInput">清除</el-button>
          <el-button type="primary" @click="getSubject">搜索</el-button>
        </div>
      </el-row>
      <!-- 卡片试图区域 -->
      <el-alert type="info" show-icon>
        <span slot="title">数据一共{{total}}条</span>
      </el-alert>
      <!-- 表格 -->
      <el-table :data="subjectList" border stripe>
        <!-- 展开列 -->
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="学科名称" prop="subjectName"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期">
          <template v-slot='scope'>{{scope.row.addDate | formatTime}}</template>
        </el-table-column>
        <el-table-column label="前台是否显示" prop="isFrontDisplay">
          <template slot-scope="scope">
            {{scope.row.isFrontDisplay === 1 ? '是' : '否'}}
          </template>
        </el-table-column>
        <el-table-column label="二级目录" prop="twoLevelDirectory"></el-table-column>
        <el-table-column label="标签" prop="tags"></el-table-column>
        <el-table-column label="题目数量" prop="totals"></el-table-column>
        <el-table-column label="操作" width="300">
          <template v-slot='scope'>
            <el-link class="table-column-link" type="primary" @click="clic(scope.row)">学科分类</el-link>
            <el-link class="table-column-link" type="primary" @click="click(scope.row)">学科标签</el-link>
            <el-link class="table-column-link" type="primary" @click="xiugaisubject(scope.row)">修改</el-link>
            <el-link type="primary" @click="deletesubject(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[5, 10, 15, 20]" :page-size="10" layout="prev, pager, next, sizes, jumper" :total="total">
      </el-pagination>

      <!-- 新增学科对话框   -->
      <el-dialog title="新增目录" :visible.sync="dialogVisible" width="25%" @close="getresetFields">
        <!-- 内容主体区域 -->
        <el-form :model="addSubject" :rules="addSubjectRules" ref="addSubjectRef" label-width="80px">
          <el-form-item label="学科名称" prop="name">
            <el-input v-model="addSubject.name" placeholder="请输入学科名称"></el-input>
          </el-form-item>
          <el-form-item label="是否显示" prop="delivery">
            <el-switch v-model="addSubject.delivery"></el-switch>
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="quxiaoxinzeng">取 消</el-button>
          <el-button type="primary" @click="addSub">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改学科对话框   -->
      <el-dialog title="修改学科" :visible.sync="xiugaiVisible" width="25%" @close="getresetFields">
        <!-- 内容主体区域 -->
        <el-form :model="xgaddSubject" :rules="addSubjectRules" ref="xgaddSubjecttRef" label-width="80px">
          <el-form-item label="学科名称" prop="name">
            <el-input v-model="xgaddSubject.name" placeholder="请输入学科名称"></el-input>
          </el-form-item>
          <el-form-item label="是否显示" prop="delivery">
            <el-switch v-model="xgaddSubject.delivery"></el-switch>
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="xiugaicaozuo">取 消</el-button>
          <el-button type="primary" @click="xiugaiaddSub">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除学科对话框 -->
      <el-dialog title="提示" :visible.sync="removeVisible" width="25%">
        <span>此操作将永久删除学科，是否继续？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="quxiaoshanchu">取 消</el-button>
          <el-button type="primary" @click="removeAddSub">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </el-card>
</template>
<script>
import { getSubjectManage, postSubject, xiugaiSubject, deleteSubject } from '@/assets/api/subject/subject.js';
export default {
  data () {
    return {
      // 删除保存id
      deleteid: 0,
      // 总条数
      total: 0,
      page: 1,
      pagesize: 10,
      // 搜索学科
      sousuoSub: '',
      // 学科分类的数据列表
      subjectList: [],
      // 添加学科的对话框
      dialogVisible: false,
      // 添加学科的表单数据
      addSubject: {
        name: '',
        delivery: false,
      },
      xgaddSubject: {
        name: '',
        delivery: false
      },
      removeVisible: false,
      // 添加表单的验证规则对象
      addSubjectRules: {
        name: [
          { required: true, message: '请输入正确学科名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' },
        ],
      },
      // 修改对话框显示与隐藏
      xiugaiVisible: false,
      id: '',
    };
  },
  created () {
    this.getSubject();
  },
  methods: {
    // 获取学科列表分类数据
    async getSubject () {
      const { data } = await getSubjectManage({
        page: this.page,
        pagesize: this.pagesize,
        subjectName: this.sousuoSub,
      });
      this.subjectList = data.items;
      this.total = data.counts;
    },
    getresetFields () {
      this.$refs.addSubjectRef.resetFields();
    },
    // 点击对话框确定按钮提交数据
    addSub () {
      this.$refs.addSubjectRef.validate(async (data) => {
        if (data) {
          if (this.addSubject.delivery === false) {
            this.addSubject.delivery = 0;
          } else {
            this.addSubject.delivery = 1;
          }
          await postSubject({
            subjectName: this.addSubject.name,
            isFrontDisplay: this.addSubject.delivery
          }
          )
          this.dialogVisible = false
          this.getSubject()
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: 'shibai'
          })
        }
      })
    },
    clic (data) {
      this.$router.push({
        path: '/subject/sort',
        query: {
          id: data.id,
          subjectName: data.subjectName
        }
      })
    },
    click (data) {
      this.$router.push({
        path: '/subject/tag',
        query: {
          id: data.id,
          subjectName: data.subjectName
        }
      });
    },
    // 清除搜索表单
    clearInput () {
      this.sousuoSub = '';
      this.getSubject();
    },
    // 每页切换为多少条
    handleSizeChange (pageSize) {
      this.pagesize = pageSize;
      this.getSubject();
    },
    // 当前多少页
    handleCurrentChange (page) {
      this.page = page;
      this.getSubject();
    },
    // 修改的按钮
    xiugaisubject (row) {
      this.id = row.id;
      this.xiugaiVisible = true;
      this.xgaddSubject.name = row.subjectName;
      if (row.isFrontDisplay === 0) {
        this.xgaddSubject.delivery = false
      } else {
        this.xgaddSubject.delivery = true
      }
    },
    // 确认修改
    async xiugaiaddSub () {
      if (this.xgaddSubject.delivery) {
        this.xgaddSubject.delivery = 1
      } else {
        this.xgaddSubject.delivery = 0
      }
      const { data } = await xiugaiSubject({
        id: this.id,
        subjectName: this.xgaddSubject.name,
        isFrontDisplay: this.xgaddSubject.delivery
      })
      if (data.success) {
        this.$message({
          message: '修改成功',
          type: 'success',
        });
      } else {
        this.$message.error('修改失败');
      }
      this.getSubject();
      this.xiugaiVisible = false;
    },
    // 删除按钮
    async deletesubject (row) {
      this.removeVisible = true
      this.deleteid = row.id
    },
    // 删除确定按钮
    async removeAddSub () {
      const { data } = await deleteSubject(this.deleteid)
      if (data.success) {
        this.$message({
          message: '删除成功',
          type: 'success',
        });
      } else {
        this.$message.error('删除失败');
      }
      this.getSubject()
      this.removeVisible = false
    },
    // 取消删除
    quxiaoshanchu () {
      this.removeVisible = false
      this.$message({
        message: '取消操作',
        type: 'success'
      });
    },
    // 失去焦点继续渲染页面
    loseFocus () {
      this.getSubject()
    },
    // 新增取消按钮
    quxiaoxinzeng () {
      this.dialogVisible = false
      // this.$refs.addSubjectRef.clearValidate();
      this.$message({
        message: '取消新增',
        type: 'success'
      });
    },
    // 修改取消按钮
    xiugaicaozuo () {
      this.xiugaiVisible = false
      // this.$refs.addSubjectRef.clearValidate();
      this.$message({
        message: '取消修改',
        type: 'success'
      });
    }
  }
}
</script>
<style lang="less" scoped>
.el-card {
  padding: 0 15px;
}

.table-column-link {
  /deep/ .el-link--inner {
    margin-right: 10px !important;
  }
}
.subjectLeft {
  width: 25%;
  float: left;
}
.subjectRight {
  float: right;
}
.subjectOne {
  margin-bottom: 10px;
}
.subjectTwo {
  margin-bottom: 10px;
}
.block {
  float: right;
}
.el-alert {
  margin-bottom: 10px;
}
.el-pagination {
  float: right;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
